.license-pricing {
    @extend %stage;

    #content {
        @extend .pr-3;
        padding-left: 2rem;
        .page-info {
            h1 {
                font-weight: 400;
                font-size: 2.5rem;
                @include media-breakpoint-down(sm) {
                    font-size: 1.4rem;
                }
            }
            p {
                @extend .lead, .mx-4;
            }
        }

        section {
            @extend .full-width-row;
            > div {
                @extend .my-3, .py-2, .mx-0;
                @include media-breakpoint-up(sm) {
                    width: calc(100% - 2rem);
                }
            }
        }

        .packages {
            > div {
                @extend .card, .row, .flex-md-row, .flex-nowrap, .py-3;
                > div:first-child {
                    min-width: 10rem;
                    @extend .col-md, .d-flex, .justify-content-center, .mb-4, .mb-md-0, .align-items-start;
                    img {
                        min-width: 5rem;
                    }
                }
                >div:last-child {
                    @extend .col-lg, .flex-fill;
                }
                h2 {
                    @extend .card-title;
                }
                h3 {
                    @extend .card-subtitle, .mb-2, .text-muted;
                }
                ul {
                    @extend .card-text;
                }
                span {
                    font-family: monospace;
                    @extend .mx-2;
                }
                .package-install {
                    @extend .d-flex;
                    span:first-child {
                        @extend .ml-0;
                    }
                    span:last-child {
                        @extend .ml-auto;
                        @include media-breakpoint-down(sm) {
                            display: none;
                        }
                    }
                }
            }
        }
    }
    
    #licenses {
        .license-container {
            @extend .row;
        }
        .license {
            @extend .card, .col-lg, .text-center, .pt-2, .pt-md-5, .mb-3, .mx-lg-3, .px-0;

            .card-body {
                @extend .card-body;
            }
            &:first-child {
                @extend .ml-lg-0;
            }
            &:last-child {
                @extend .mr-lg-0;
            }

            > div:last-of-type {
                @extend .card-footer;
            }
            
            background-color: $gray-100;

            img {
                max-width: 4.5rem;
                @extend .mb-2, .mb-md-5;
            }
    
            .btn {
                @extend .d-block, .btn-outline-secondary, .btn-lg;
                background-color: $white;
            }
    
            p {
                @extend .mt-5;
                font-size: 0.9rem;
            }

            h3 {
                font-size: 1rem;
            }
        
            h4 {
                font-size: 2rem;
                margin-top: 2rem;
                span {
                    font-size: 0.7rem;
                    font-weight: 300;
                }
                p {
                    @extend .mt-0;
                }
            }
        }
    }

    #definitions, #deeper-dive, #timeline {
        img {
            max-width: 60%;
            min-width: 20rem;
        }
        > div {
            @extend .row, .mb-4, .justify-content-end;
            > div {
                @extend .d-inline-block;
                &:first-child {
                    @extend .ml-md-3;
                    min-width: 2.5rem;
                    max-width: 2.5rem;
                    
                    img {
                        min-width: 2.5rem;
                        max-width: 2.5rem;
                    }
                }
                &:last-of-type {
                    @extend .col-md;
                    span {
                        @extend .font-weight-bold;
                    }
                }
                > p:nth-of-type(2) {
                    font-weight: 400;
                }
                .example {
                    @extend .mb-3, .my-md-3;
                    .card-header {
                        @extend .font-weight-bold;
                    }
                }
            }
        }
    }

    #timeline > div {
        @extend .justify-content-center;
    }

    #side-bar {
        @media (max-width:1646px) {
            display: none !important;
        }
    }
}

